<!DOCTYPE html>
<html>
<h>
    <meta charset="utf-8"/>
    <!--viewport一定要加 user-scalable 值可以是yes|no或1|0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
    <!-- 禁止将数字转为号码 -->
    <meta name="format-detection" content="telephone=no" />
    <!-- 控制顶栏状态栏显示样式，可以为透明 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 添加一个网站图标，这样当你将网站添加到桌面图标时，会显示出来 -->
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="apple-touch-icon-precomposed" href="mobile_logo.png?v1" />
    <link rel="stylesheet" href="css/公共css.css">
    <link rel="stylesheet" href="font_2331048_y3n7j0esa2p/iconfont.css">
    <link rel="stylesheet" href="font_2334358_okd8wu1pimh/iconfont.css">
    <link rel="stylesheet" href="css/去哪儿首页.css">
    <title>去哪儿首页</title>

    <!-- 将px转rem的公式代码 -->
    <script>
        //昨天的
        // var w=window.innnerWidth;
        // 今天：
        var w=document.documentElement.getBoundingClientRect().width;
        //7.5是根据设计图的大小除以100，需要按照你的实际设计图换算
        var bili=w/3.75;
        document.documentElement.style.fontSize=bili+"px";

        // 此时  100px=1rem
        // 将所有在设计图量出的尺寸都除以100即可转为对应的rem
    </script>
    <script src="js/TouchSlide.1.1.js"></script>
<body>
  <!-- 网页内容 -->
  <!-- 記住写样式时將设计图量出的px除以100得到对应的rem 
  比如：10px==> 0.1rem
  -->
  <header class="tc font12 mt30">
    <ul class="flex d2 ">
      <li>
        <img style="width: 0.5rem;height: 0.5rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/hotel.png" alt="">
          <p>酒店</p>
      </li>
      <li>
        <img style="width: 0.5rem;height: 0.5rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/flight.png" alt="">
          <p>机票</p>
      </li>
      <li>
        <img  style="width: 0.5rem;height: 0.5rem;"  src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/train.png" alt="">
          <p>火车票</p>
      </li>
      <li>
        <img  style="width: 0.5rem;height: 0.5rem;"  src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/package.png" alt="">
          <p>度假</p>
      </li>
      <li>
        <img  style="width: 0.5rem;height: 0.5rem;"  src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/piao.png" alt="">
          <p>景点门票</p>
      </li>
    </ul>
    <ul class="flex d1 mt10">
      <li>
        <img style="width: 0.29rem;height: 0.29rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/f5e5770393d759578962e53ee67798c8.png" alt="">
          <p>海外酒店</p>
      </li>
      <li>
        <img style="width: 0.29rem;height: 0.29rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/a36d2288f19e54562338f4d8ef986288.png" alt="">
          <p>低价机票</p>
      </li>
      <li>
        <img  style="width: 0.29rem;height: 0.29rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/377db8cb2143aebf01869c9baad3d325.png" alt="">
          <p>汽车票船票</p>
      </li>
      <li>
        <img  style="width: 0.29rem;height: 0.29rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/ae617a31e0bd5803d76918b817f6d942.png" alt="">
          <p>自由行</p>
      </li>
      <li>
        <img  style="width: 0.29rem;height: 0.29rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/1316dc82d1ce6259686d5a68880e5a9d.png" alt="">
          <p>攻略</p>
      </li>
    </ul>
    <ul class="flex d1 mt10">
      <li>
        <img  style="width: 0.29rem;height: 0.29rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/01d2f57f920666364197a850dab859a8.png" alt="">
          <p>民宿客栈</p>
      </li>
      <li>
        <img  style="width: 0.29rem;height: 0.29rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/83af731055e121a3251690b225327b56.png" alt="">
          <p>专车自驾</p>
      </li>
      <li>
        <img  style="width: 0.29rem;height: 0.29rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/5b6737be49ca243072ca614f07803b83.png" alt="">
          <p>赚钱信用卡</p>
      </li>
      <li>
        <img  style="width: 0.29rem;height: 0.29rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/1e107321f5396ea4994cd832232ecf8a.png" alt="">
          <p>旅游团购</p>
      </li>
      <li>
        <img  style="width: 0.29rem;height: 0.29rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/c65b3bb7571a6bd62df669213e44b84d.png" alt="">
          <p>一日游</p>
      </li>
    </ul>
    <ul class="flex d1 mt10">
      <li>
        <img  style="width: 0.29rem;height: 0.29rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/f6bb08a239ce1b038204120a8d1e4669.png" alt="">
          <p>特惠酒店</p>
      </li>
      <li>
        <img style="width: 0.29rem;height: 0.29rem;"  src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/3a08f360e958ccb2b947049387873ace.png" alt="">
          <p>借钱</p>
      </li>
      <li>
        <img  style="width: 0.29rem;height: 0.29rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/19b4f6d2fabd617789fa5aad65b249da.png" alt="">
          <p>白金卡</p>
      </li>
      <li>
        <img style="width: 0.29rem;height: 0.29rem;"  src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/734c3c62d2adce02.png" alt="">
          <p>行程设计</p>
      </li>
      <li>
        <img  style="width: 0.29rem;height: 0.29rem;" src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/25e3b9f17a21a6e0113c57a23ffccde4.png" alt="">
          <p>周边短途</p>
      </li>
    </ul>
  </header>
  <section class="pd10rem">
    <h2><span class="iconfont icon-feiji blue"></span>特惠度假</h2>
    <div class="e2">
      <button class="d9">当季热门度假</button>
      <button>今日特惠度假</button>
    </div>
    <ul class="flex d5 mt10">
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/0ebfcd965b9391f7.jpg_256x160_04d5813d.jpg);">
          <p class="tc d4 white">长沙-三亚<br>
            <span class="orange">5天跟团游</span>
          </p>
        </div>
        <p>含往返飞机票+2晚住宿</p>
        <h3 class="orange">￥1660</h3>
      </li>
      <li>
        <div class="d3 flex " style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/2a3d362aabcbb02.jpg_256x160_28907832.jpg);">
          <p class="tc d4 white">长沙-重庆<br>
            <span class="orange">5天跟团游</span>
          </p>
        </div>
        <p>含往返火车票+2晚住宿</p>
        <h3 class="orange">￥1558</h3>
      </li>
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/14bef79602a7780a3.water.jpg_256x160_3424b8ae.jpg);">
          <p class="tc d4 white">长沙-张家界<br>
            <span class="orange">3天跟团游</span>
          </p>
        </div>
        <p>含往返火车票+2晚住宿</p>
        <h3 class="orange">￥1058</h3>
      </li>
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/4e066c8b1c4dcbd093835fbb.jpg_256x160_d866deeb.jpg);">
          <p class="tc d4 white">长沙-丽江<br>
            <span class="orange">5天跟团游</span>
          </p>
        </div>
        <p>含往返火车票+3晚住宿</p>
        <h3 class="orange">￥2058</h3>
      </li>
    </ul>
    <!-- 副本 -->
    <ul class=" d5 none">
      <li >
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/93ea644adfb777469bd7665e6dfd715f.jpg);">
        </div>
        <p >美帝的美，留在图里也要藏在心底</p>
      </li>
      <li>
        <div class="d3 flex " style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/434ee530e21f1c11bad088e8cc8d5e93.water.jpg_256x160_4c723585.jpg);">
        </div>
        <p>在秘密花园，领略意大利风情</p>
      </li>
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/4941057a6aae702.jpg_256x160_9fee6ccb.jpg);">
          
        </div>
        <p>带着相机去旅行，圆一场青海梦</p>
      </li>
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/bizhuminsu2x.jfif);">
        </div>
        <p>陪你去三亚，陪你去天涯海角</p>
      </li>
    </ul>
    <!-- 副本end -->
    <div class="d6 tc">更多特惠度假></div>
  </section>
  <!-- 2 -->
  <section class="pd10rem">
    <h2><span class="iconfont icon-zhinengkefu-  blue"></span>特惠门票</h2>
    <div class="e1">
      <button class="d9">当季景点门票</button>
      <button>特惠门票</button>
    </div>
    <ul class="flex d5 mt10">
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/adca619faaab0898245dc4ec482b5722.jpg_256x160_f977b5d4.jpg);">
          
        </div>
        <p>故宫</p>
        <h3 class="orange">￥40</h3>
      </li>
      <li>
        <div class="d3 flex " style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/3979f1867defec4ea3.water.jpg_256x160_6ae804bb.jpg);">
        </div>
        <p>八达岭长城</p>
        <h3 class="orange">￥40</h3>
      </li>
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/f5f45e1a83537bcb.water.jpg_256x160_618d3a8e.jpg);">
          
        </div>
        <p>圆明园</p>
        <h3 class="orange">￥39.5</h3>
      </li>
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/920e47352552c1c990.water.jpg_256x160_2c11092c.jpg);">
        </div>
        <p>天坛公园</p>
        <h3 class="orange">￥12.8</h3>
      </li>
    </ul>
    <!-- 副本 -->
    <ul class=" d5 none">
      <li >
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/93ea644adfb777469bd7665e6dfd715f.jpg);">
        </div>
        <p >美帝的美，留在图里也要藏在心底</p>
      </li>
      <li>
        <div class="d3 flex " style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/434ee530e21f1c11bad088e8cc8d5e93.water.jpg_256x160_4c723585.jpg);">
        </div>
        <p>在秘密花园，领略意大利风情</p>
      </li>
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/4941057a6aae702.jpg_256x160_9fee6ccb.jpg);">
          
        </div>
        <p>带着相机去旅行，圆一场青海梦</p>
      </li>
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/bizhuminsu2x.jfif);">
        </div>
        <p>陪你去三亚，陪你去天涯海角</p>
      </li>
    </ul>
    <!-- 副本end -->
    <div class="d6 tc">更多特惠门票></div>
  </section>
  <!-- 插件轮播图 -->
  <div id="focus" class="focus">
    <div class="hd">
      <ul></ul>
    </div>
    <div class="bd">
      <ul>
          <li><a href="#"><img _src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/6ff121fd416169b8d56c60384e3baf79.jpeg"  /></a></li>
          <li><a href="#"><img _src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/f03f5ac90ae59d0d9c6332a2bfd9782e.jpeg" /></a></li>
          <li><a href="#"><img _src="images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/f7813c9431796cc32ae7b7a78447342e.jpeg" /></a></li>
      </ul>
    </div>
  </div>
  <script type="text/javascript">
    TouchSlide({ 
      slideCell:"#focus",
      titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
      mainCell:".bd ul", 
      effect:"left", 
      autoPlay:true,//自动播放
      autoPage:true, //自动分页
      switchLoad:"_src" //切换加载，真实图片路径为"_src" 
    });
  </script>
  <!-- 4 -->
  <section class="pd10rem">
    <h2><span class="iconfont icon-shu1 blue"></span>旅行攻略</h2>
    <div class="d10">
      <button class="d9">趣味亲子游</button>
      <button>旅拍也要出大片</button>
    </div>
    <ul class="flex d5 mt10 font14 ">
      <li >
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/307fa37039eab5cba3.water.jpg_256x160_643266e5.jpg);">
        </div>
        <p >驾一叶扁舟，寻瓯江往事</p>
      </li>
      <li>
        <div class="d3 flex " style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/c2ae82fcc9fa11fa253e5919c49bcfbf.jpg);">
        </div>
        <p>不负嵊夏好时光，泗乎太安逸</p>
      </li>
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/fd16ccffb2e2376ff370bda3bebebd71.jpg);">
          
        </div>
        <p>探访日本，一部家庭旅行画册</p>
      </li>
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/7d9b233c71cad13ded0013f9c9cec635.jpg);">
        </div>
        <p>厦门，带娃出行与幸福同行</p>
      </li>
    </ul>
    <!-- 副本 -->
    <ul class=" d5 none">
      <li >
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/93ea644adfb777469bd7665e6dfd715f.jpg);">
        </div>
        <p >美帝的美，留在图里也要藏在心底</p>
      </li>
      <li>
        <div class="d3 flex " style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/434ee530e21f1c11bad088e8cc8d5e93.water.jpg_256x160_4c723585.jpg);">
        </div>
        <p>在秘密花园，领略意大利风情</p>
      </li>
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/4941057a6aae702.jpg_256x160_9fee6ccb.jpg);">
          
        </div>
        <p>带着相机去旅行，圆一场青海梦</p>
      </li>
      <li>
        <div class="d3 flex" style="background-image: url(../images/【去哪儿网】机票查询预订，酒店预订，旅游团购，度假搜索，门票预订-去哪儿网Qunar.com/bizhuminsu2x.jfif);">
        </div>
        <p>陪你去三亚，陪你去天涯海角</p>
      </li>
    </ul>
    <!-- 副本end -->
    <div class="d6 tc">更多精彩攻略></div>
  </section>
  <footer>
    <p class="tc font12 mt20">Copyright C2020Qunar.com 京公网安备11010802030542 京ICP备05021087号京ICP证060856号 营业执照信息(京)非经营性-2016-0110<span class="iconfont icon-xiaoshi red"></span>去哪儿网客服电话95117</p>
    <p class="tc font12 mt20 ">违法和不良信息举报电话:010-59606977违法和不良信息举报邮箱： tousu@qunar.com</p>
  </footer>
  <div class="mt30" style="width: 100%;height: 0.3rem;"></div>
  <footer>
    <ul class="tc flex d7  bgwhite">
      <li><span class="iconfont icon-yemian "><br></span>首页</li>
      <li class="none"><span class="iconfont icon-huojian- d8"><br></span>回顶</li>
      <li><span class="iconfont icon-order-copy font16"><br></span>订单</li>
      <li><span class="iconfont icon-kefu "><br></span>客服</li>
      <li><span class="iconfont icon-wode "><br></span>我的</li>
    </ul>
  </footer>
  <script>
    var d7li=document.querySelectorAll(".d7 li");
    var d8=document.querySelector(".d8");
    //点击切换栏
    var d10=document.querySelectorAll(".d10 button");
    var e1=document.querySelectorAll(".e1 button");
    var e2=document.querySelectorAll(".e2 button");
    var d5=document.querySelectorAll(".d5")
    console.log(d5.length)
    d10[0].onclick=function(){
      this.className="d9"
      d10[1].className='';
      d5[5].className=" none"
      d5[4].className="flex d5 mt10 font14 "
    }
    d10[1].onclick=function(){
      this.className="d9"
      d10[0].className=''
      d5[5].className="flex d5 mt10 font14"
      d5[4].className="none "
    }
    e1[0].onclick=function(){
      this.className="d9"
      e1[1].className='';
      d5[3].className=" none"
      d5[2].className="flex d5 mt10 font14 "
    }
    e1[1].onclick=function(){
      this.className="d9"
      e1[0].className=''
      d5[3].className="flex d5 mt10 font14"
      d5[2].className="none "
    }
    e2[0].onclick=function(){
      this.className="d9"
      e2[1].className='';
      d5[1].className=" none"
      d5[0].className="flex d5 mt10 font14 "
    }
    e2[1].onclick=function(){
      this.className="d9"
      e2[0].className=''
      d5[1].className="flex d5 mt10 font14"
      d5[0].className="none "
    }
    d8.onclick=function(){
      var top=document.documentElement.scrollTop;
      if(top>=600){
        var time=setInterval(function(){
          top-=10
          console.log(top)
          if(top<=0){
            clearInterval(time)
          }
          document.documentElement.scrollTop=top;
        },5)
      }
      
    }
    document.onscroll=function(){
      var top=document.documentElement.scrollTop;
      if(top>=600&&top<3900){
        d7li[0].className="none"
        d7li[1].className=""
      }else{
        d7li[0].className=""
        d7li[1].className="none"
      }
    }
  </script>
</body>
</html>